<template>
  <el-container id="platformPermissions" style="margin-left:20px;padding:10px 0px 0px 0px">
    <el-header id="elheader" :height="headerHeight" style="margin:0px;padding:10px 0px 10px 0px">
      <el-button v-if="btnAip.save.buttonCaption" type="primary" @click="handelSave">{{ btnAip.save.buttonCaption }}</el-button>
      <el-button v-if="btnAip.delete.buttonCaption" type="danger" @click="handelDelete">{{ btnAip.delete.buttonCaption }}</el-button>
    </el-header>
    <el-container style="margin:0px;padding:0px">
      <el-aside width="240px" style="margin:0px;padding:0px">
        <div style="height:30px;margin-bottom: 10px;">
          <md-input v-model="filterTenant" icon="search" placeholder="请输入租户" @keyup.enter.native="tenantQuery" />
        </div>
        <el-table
          ref="outTable"
          :data="outTableData"
          :height="mainHeight-40"
          style="width: 100%;"
          highlight-current-row
          border
          empty-text="没有查询到租户"
          :show-header="false"
          @row-click="handelOutTableRowClick"
        >
          <el-table-column prop="companyName" label="租户" width="239" header-align="center" />
        </el-table>
      </el-aside>
      <el-main style="margin:0px 10px 0px 10px;padding:0px">
        <el-container style="margin:0px;padding:40px 0px 0px 0px">
          <el-main class="menusTable" style="margin:0px 10px 0px;padding:0px">
            <el-table
              ref="innerTable"
              :height="mainHeight-40"
              :data="inTableData"
              style="width: 99.9%"
              row-key="id"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              border
              @select="handelInnerTableSelect"
              @select-all="handelInnetTableSelectAll"
            >
              <el-table-column type="selection" />
              <el-table-column v-if="false" prop="id" label="id" />
              <el-table-column v-if="false" prop="tempId" label="tempId" />
              <el-table-column prop="menuName" label="菜单名称" width="160px">
                <template slot-scope="scope">
                  <el-badge
                    v-if="scope.row.badgeNum>0"
                    :value="scope.row.badgeNum"
                    class="badgeItem"
                  >{{ scope.row.menuName }}</el-badge>
                  <div
                    v-if="scope.row.badgeNum<=0|| !scope.row.badgeNum"
                    class="badgeItem"
                  >{{ scope.row.menuName }}</div>
                </template>
              </el-table-column>

              <el-table-column prop="menuDesc" label="菜单描述" width="160px" />
              <el-table-column prop="buttons" label="按钮权限">
                <template slot-scope="scope">
                  <el-checkbox-group v-if="scope.row.isMenu" v-model="scope.row.buttons">
                    <el-checkbox
                      v-for="item in allButton"
                      :key="item.id"
                      :label="item.id"
                      @change="handleCheckGroup($event,scope.row)"
                    >{{ item.buttonCaption }}</el-checkbox>
                  </el-checkbox-group>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="150px">
                <template v-if="scope.row.isMenu" slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.btnState"
                    @change="handelCheckAll($event,scope.row)"
                  >全选</el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import RequestObject from '@/utils/requestObject'
import request from '@/utils/request'
import { MessageBox } from 'element-ui'
import DateUtil from '@/utils/dateUtil'
import height from '@/utils/height'
import AppTree from '@/utils/appTree'
import { constants } from 'crypto'
import MdInput from '@/components/MDinput'
import { getBtnCtr } from '@/utils/BtnControl'

export default {
  components: {
    MdInput
  },
  data() {
    return {
      filterTenant: '',
      headerHeight: '50px',
      mainHeight: 0,
      treeDivStyle: '',
      treeData: null,
      outTableData: null,
      inTableData: [],
      allButton: null,
      currAppPermisson: null, // 当前正在操作的APP及菜单权限
      outSelectedRow: null, // 模板名称选中的行
      allPermisson: null, // 所有模板权限信息
      selectedNodeId: -1, // 被选中的节点id
      treeStyle: '',
      tableHeight: '500px',
      checkAll: false,
      checkAllState: false,
      isIndeterminate: true,
      roleList: {},
      btnIdList: [], // 权限按钮id list
      btnIsDefault: [],
      changeState: false,
      btnAip: ''
    }
  },
  created() {
    // 设置当前页面样式
    this.setStyle()

    // 初始化所有模板信息
    this.InitTemplates()

    this.InitButtons() // 获取Menutree

    this.getAppTree().then(() => {
      // this.getPermissions(); //获取Menutree
    })

    // 动态头部按钮
    this.btnAip = getBtnCtr(
      this.$route.path,
      this.$store.getters.userPermission
    )

  },
  methods: {
    /**
     * tenantQuery
     * 搜索租户
     */
    tenantQuery() {
      if (this.filterTenant == '') {
        this.InitTemplates()
      } else {
        var QueryData = [
          {
            column: 'CompanyName',
            content: this.filterTenant,
            condition: 6
          }
        ]
        var reqObject = RequestObject.GetObject(null, null, QueryData)
        this.$refs.innerTable.clearSelection()
        request({
          url: '/system/api/TSMCompany',
          method: 'get',
          params: {
            requestObject: JSON.stringify(reqObject)
          }
        }).then(res => {
          if (res.code == -1) {
            this.$confirm(res.info, '错误信息', {
              confirmButtonText: '确定',
              type: 'error',
              showCancelButton: false
            })
          } else {
            this.outTableData = res.data
          }
        })
      }
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
    },
    getPermissions() {
      var reqObject = RequestObject.CreateGetObject(false, 0, 0, [
        { column: 'tenantId', content: this.roleList.id, condition: 0 }
      ])
      request({
        url: '/platform/api/TTenantPermissions',
        method: 'get',
        params: {
          requestObject: JSON.stringify(reqObject)
        }
      }).then(res => {
        if (res.code == -1) {
          this.$confirm(res.info, '错误信息', {
            confirmButtonText: '确定',
            type: 'error',
            showCancelButton: false
          })
        } else {
          this.allPermisson = res.data
          this.handlePermissionsData(this.inTableData, res.data)
        }
      })
    },
    handlePermissionsData(parent, data) {
      // 将权限数据导入Apptree
      var This = this
      this.menuTreeDefault(this.inTableData)
      function setData(dt) {
        for (var i = 0; i < dt.length; i++) {
          for (var j = 0; j < data.length; j++) {
            if (dt[i].id == data[j].menuId) {
              var b = data[j].buttonIds.split(',')
              var d = []
              b.map(function(item) {
                d.push(parseInt(item))
              })
              if (This.btnIdList.length == d.length) {
                dt[i].btnState = true
              }
              This.$refs.innerTable.toggleRowSelection(dt[i], true)

              This.$set(dt[i], 'buttons', d)
            }
          }
          if (dt[i].children) {
            setData(dt[i].children)
          }
        }
      }
      setData(parent)
      this.handelParent(parent)
    },
    handelParent(dt) {
      // 父级的菜单选择处理
      // 添加子元素选中的标志
      var setFlag = dt => {
        for (var i = 0; i < dt.length; i++) {
          if (dt[i].children) {
            for (var j = 0; j < dt[i].children.length; j++) {
              if (dt[i].children[j].buttons.length > 0) {
                dt[i].children[j].btnIf = 'btnIfbtnIfbtnIfbtnIf_2'
              }
            }
            setFlag(dt[i].children)
          }
        }
      }
      setFlag(dt) // 添加子元素选中的标志
      this.setRowSelect(dt) // 设置选中
      for (var i = 0; i < dt.length; i++) {
        this.msgCount(dt[i]) // 统计消息
      }
    },
    msgCount(dt) {
      var l = 0
      var setCount = dt => {
        for (var i = 0; i < dt.length; i++) {
          if (dt[i].buttons.length > 0 && dt[i].isMenu) {
            l = l + 1
          }
          if (dt[i].children) {
            setCount(dt[i].children)
          }
        }
      }
      setCount(dt.children)
      dt.badgeNum = l
    },
    setRowSelect(dt) {
      // 设置选中
      for (var i = 0; i < dt.length; i++) {
        if (dt[i].children) {
          // 不选父级按钮
          for (var j = 0; j < dt[i].children.length; j++) {
            if (dt[i].children[j].buttons.length <= 0) {
              var a = 0
              for (var k = 0; k < dt[i].children.length; k++) {
                a = a + dt[i].children[k].buttons.length
              }
              if (a == 0) {
                this.$refs.innerTable.toggleRowSelection(dt[i], false)
              }
            }
          }
          // 选中父级按钮
          var ste = JSON.stringify(dt[i].children)
          if (ste.indexOf('btnIfbtnIfbtnIfbtnIf_2') != -1) {
            this.$refs.innerTable.toggleRowSelection(dt[i], true)
          }

          this.setRowSelect(dt[i].children)
        }
      }
    },
    InitButtons() {
      // 获取按钮数据
      var reqObject = RequestObject.CreateGetObject()
      request({
        url: '/platform/api/tbuttons',
        method: 'get',
        params: {
          requestObject: JSON.stringify(reqObject)
        }
      }).then(res => {
        if (res.code == -1) {
          this.$confirm(res.info, '错误信息', {
            confirmButtonText: '确定',
            type: 'error',
            showCancelButton: false
          })
        } else {
          this.allButton = res.data

          this.btnIdList = []
          this.btnIsDefault = []
          this.allButton.map(v => {
            this.btnIdList.push(v.id)
            if (v.isDefault) {
              this.btnIsDefault.push(v.id)
            }
          })
        }
      })
    },
    getAppTree() {
      // 获取table数据
      var robject = RequestObject.CreateGetObject(false, 0, 0, [
        { column: 'ParentID', content: '-1', condition: 0 }
      ])
      return request({
        url: '/platform/api/TMenus/GetTree',
        method: 'get',
        params: {
          requestObject: robject
        }
      }).then(res => {
        if (res.code === 0) {
          this.inTableData = this.handleData(res.data)
        } else {
          this.$confirm(res.info, '错误信息', {
            confirmButtonText: '确定',
            type: 'error',
            showCancelButton: false
          })
        }
      })
    },
    handleData(data) {
      this.menuTreeDefault(data)
      return data
    },
    menuTreeDefault(dt) {
      // 重置table权限按钮
      for (var i = 0; i < this.inTableData.length; i++) {
        this.inTableData[i].badgeNum = 0 // 消息初始化
      }
      this.setTreeDefault(dt)
    },
    setTreeDefault(dt) {
      // Tree递归赋值
      for (var i = 0; i < dt.length; i++) {
        dt[i].buttons = [] // 按钮数组
        dt[i].btnState = false // 全选flag
        dt[i].btnIf = 'btnIfbtnIfbtnIfbtnIf_1' // 选中flag
        this.$refs.innerTable.toggleRowSelection(dt[i], false)
        if (dt[i].children) {
          this.setTreeDefault(dt[i].children)
        }
      }
    },
    setStyle() {
      // 设置样式
      this.mainHeight = height - 116 - parseInt(this.headerHeight)
      this.treeStyle =
        'width:236px;height:' +
        (this.mainHeight - 4).toString() +
        'px;padding:0px;'
      this.treeDivStyle =
        'width:240px;height:' +
        this.mainHeight.toString() +
        'px;padding:2px;background:drgb(230,235,245);'
    },
    InitTemplates() {
      var reqObject = RequestObject.GetObject()
      request({
        url: '/system/api/TSMCompany',
        method: 'get',
        params: {
          requestObject: JSON.stringify(reqObject)
        }
      }).then(res => {
        if (res.code == -1) {
          this.$confirm(res.info, '错误信息', {
            confirmButtonText: '确定',
            type: 'error',
            showCancelButton: false
          })
        } else {
          this.outTableData = res.data
        }
      })
    },
    handelSave() {
      // alert(this.changeState)
      if (!this.roleList.id) {
        this.$message({
          message: '请先选择租户后再保存数据',
          type: 'error'
        })
        return
      }
      var postDataList = []
      var getChange = dt => {
        for (var i = 0; i < dt.length; i++) {
          if (dt[i].buttons.length > 0) {
            var data = {
              id: 0,
              tenantId: this.roleList.id,
              menuId: dt[i].id,
              buttonIds: dt[i].buttons.join(',')
            }
            if (dt[i].isMenu) {
              postDataList.push(data)
            }
          }
          if (dt[i].children) {
            getChange(dt[i].children)
          }
        }
      }
      getChange(this.inTableData)
      if (postDataList.length <= 0) {
        this.$message({
          message: '该租户下没有任何菜单，无法保存数据',
          type: 'error'
        })
        return
      }

      // if (JSON.stringify(AppTree.ToMenusIdButtonId(this.allPermisson)) === JSON.stringify(AppTree.ToMenusIdButtonId(postDataList))) {
      if (!this.changeState) {
        this.$message({
          message: '请修改租户权限后再保存数据',
          type: 'error'
        })
        return
      }
      var reqObject = RequestObject.CreatePostObject(null, postDataList)
      // 保存角色权限信息
      request({
        url: '/platform/api/TTenantPermissions',
        method: 'post',
        data: reqObject
      }).then(res => {
        if (res.code == -1) {
          this.$confirm(res.info, '错误信息', {
            confirmButtonText: '确定',
            type: 'error',
            showCancelButton: false
          })
        } else {
          this.$message({
            message: '保存租户权限信息成功!',
            type: 'success'
          })

          // 重新获取数据
          this.changeState = false
          this.getPermissions()
          // this.InitAllPermission();
        }
      })
    },
    handelOutTableRowClick(row) {
      // 侧边栏点击
      if (!this.roleList.id) {
        // 未选菜单时候
        this.roleList = row
        this.getPermissions() // 获取权限
        this.changeState = false
      }
      if (this.changeState == true) {
        this.$confirm(
          '是否删除租户名称为：' + this.roleList.companyName + '的权限?',
          '确认信息',
          {
            type: 'info'
          }
        ).then(() => {
          this.roleList = row
          this.getPermissions() // 获取权限
        })
        this.$confirm('是否保存数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.handelSave() // 保存数据
            this.getPermissions() // 获取权限
            this.changeState = false
          })
          .catch(() => {
            this.roleList = row
            this.getPermissions() // 获取权限
            this.changeState = false
          })
      } else {
        this.roleList = row
        this.getPermissions() // 获取权限
      }
    },
    handelInnerTableSelect(selection, row) {
      this.changeState = true // 表示用户操作过数据
      // 如果row在selection表示是选中了
      // 如果row不在selection表示取消选中了
      let selectionFlag = false
      selection.forEach((v, i) => {
        if (v.id == row.id) {
          selectionFlag = true
          return
        }
      })
      if (!selectionFlag) {
        // 取消当前菜单权限
        // row.buttons = [];
        this.menuTreeDefault([row])
      } else {
        // const defaultButton = this.GetDefaultButton();
        this.menuTreeSelectAll([row])
        // row.buttons = defaultButton;
      }
      this.handelParent(this.inTableData)
      // // 设置Tree的勾选
      // this.SetTreeCheck();
    },
    menuTreeSelectAll(dt, state) {
      for (var i = 0; i < dt.length; i++) {
        if (state) {
          this.$set(dt[i], 'buttons', this.btnIdList)
        } else {
          this.$set(dt[i], 'buttons', this.btnIsDefault)
        }
        this.$refs.innerTable.toggleRowSelection(dt[i], true)
        if (dt[i].children) {
          this.menuTreeSelectAll(dt[i].children)
        }
      }
    },
    handelInnetTableSelectAll(selection) {
      this.changeState = true // 表示用户操作过数据
      this.checkAllState = !this.checkAllState
      if (this.checkAllState) {
        this.menuTreeSelectAll(this.inTableData) // 全选
      } else {
        this.menuTreeDefault(this.inTableData) // 全不选
      }
      this.handelParent(this.inTableData)
    },
    handelCheckAll(value, row) {
      this.changeState = true // 表示用户操作过数据
      if (value) {
        this.$set(row, 'buttons', this.btnIdList)
        this.menuTreeSelectAll([row], 1)
      } else {
        this.menuTreeDefault([row])
      }
      this.handelParent(this.inTableData)
    },
    handleCheckGroup(value, row) {
      this.changeState = true // 表示用户操作过数据
      if (value) {
        this.$refs.innerTable.toggleRowSelection(row, true)
        if (this.btnIdList.length == row.buttons.length) {
          row.btnState = true
        }
      } else {
        if (row.buttons.length < 1) {
          this.$refs.innerTable.toggleRowSelection(row, false)
        }
        if (this.btnIdList.length != row.buttons.length) {
          row.btnState = false
        }
      }
      this.handelParent(this.inTableData) // 处理父级选中
    },
    handelDelete() {
      if (!this.roleList.id) {
        this.$message({
          message: '请选择需要删除的租户名称',
          type: 'error'
        })
        return
      }

      this.$confirm(
        '是否删除租户名称为：' + this.roleList.companyName + '的权限?',
        '确认信息',
        {
          type: 'info'
        }
      ).then(() => {
        var postData = this.roleList.id
        var reqObject = RequestObject.CreatePostObject(postData)
        request({
          url: '/platform/api/TTenantPermissions/ByTenantId',
          method: 'delete',
          data: reqObject
        }).then(res => {
          if (res.code == -1) {
            this.$confirm(res.info, '错误信息', {
              confirmButtonText: '确定',
              type: 'error',
              showCancelButton: false
            })
          } else {
            this.$message({
              message: '删除该角色所有权限成功!',
              type: 'success'
            })

            // 重新获取数据
            this.getPermissions()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#platformPermissions /deep/ {
  .material-input__component[data-v-6bb35d14] {
    margin-top: 0px;
    position: relative;
}
   .asideTable {
    background: #fff;
    border: 1px solid #dfe6ec;
  }
  .roleTable {
    font-size: 12px;
    padding: 4px 10px 3px;
    border-bottom: 1px solid #dfe6ec;
    cursor: pointer;
  }
  .active {
    background: #f5f7fa;
  }
  .roleTable:hover {
    background: #f5f7fa;
  }
  .badgeItem {
    display: inline-block;
  }
  .menusTable{
    .el-table .cell {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  }
  aside {
    background: #fff;
  }
}
</style>
